<template>
	<view class="search">
		<view class="line"></view>
		<!-- 我是搜索页面 -->
		<!-- 最近搜索 -->
		<view class="search-item">
			<view class="search-title">
				<view class="f-color">最近搜索</view>
				<view class="icon iconfont icon-shanchu" @click="clearKeyword"></view>
			</view>
			<view class="" v-if="keywordList.length>0">
				<view class="search-name f-color" v-for="(item,index) in keywordList" :key="index" @click="chooseKeyword(index)">{{item}}</view>
			</view>
			<view class="search-end" v-else>暂无最近搜索记录</view>
			<!-- 热门搜索 -->
		</view>
		<view class="search-item">
			<view class="search-title">
				<view class="f-color">热门搜索</view>
			</view>
			<view class="">
				<view class="search-name f-color">nike篮球鞋</view>
				<view class="search-name f-color">啊迪足球鞋</view>
				<view class="search-name f-color">欧文3代</view>
				<view class="search-name f-color">Balenciaga</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 输入的关键词
				keyword: '',
				// 关键词记录
				keywordList: [],
			}
		},
		onLoad() {
			// uni.getStorage(OBJECT)：从本地缓存中异步获取指定 key 对应的内容。
			uni.getStorage({
				key:"keyword",
				success: (res) => {
					// console.log(res);
					// console.log(JSON.parse(res.data));
					this.keywordList = JSON.parse(res.data);
				}
			})
		},
		// 监听原生标题栏按钮点击事件，参数为Object
		onNavigationBarButtonTap(e) {
			// console.log(e);
			if (e.float == "right" && this.isNull()) {
				// console.log(123);
				this.goSearchList();
			}
		},
		// 监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e) {
			// console.log(e);
			this.keyword = e.text;
		},
		// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
		onNavigationBarSearchInputConfirmed(e) {
			// console.log(e);
			if (this.isNull()) {
				this.goSearchList();
			}
		},
		methods: {
			// 判断关键词是否为空和跳转页面
			isNull() {
				// console.log(this.keyword);
				if (this.keyword == "") {
					uni.showToast({
						title: "关键词不能为空",
						icon: "none",
					})
					return false;
				} else return true;
			},
			// 跳转至搜索结果页searchList
			goSearchList() {
				uni.navigateTo({
					url: `../search/searchList?keyword=${this.keyword}`
				});
				// 记录搜索词
				this.addKeyWord();
				// 隐藏软键盘
				uni.hideKeyboard();
			},
			// 记录最近搜索词
			addKeyWord() {
				// indexOf()函数： 返回指定字符str在字符串中（方法调用者）第一次出现处的起始索引，如果此字符串中没有这样的字符，则返回 -1。
				let index = this.keywordList.indexOf(this.keyword);
				// 重复搜索
				if (index == -1) {
					// unshift()函数：该函数向数组的开头添加一个或更多元素，并返回新的长度。
					this.keywordList.unshift(this.keyword);
				} else {
					// 新搜索内容
					/* splice（）的主要用途是向数组中部插入项，方式有以下三种：
						1、删除：可以删除任意数量的项，只需要指定两个参数：要删除的第一项的位置和要删除的项数。
						2、插入：可以向指定位置插入任意数量的项，只要提供三个参数：起始位置、0（要删除的项数）、和要插入的项。
						3、替换：可以向指定位置插入任意数量的项，同时删除任意数量的项，指定三个参数：起始位置、要删除的项数、和要插入的任意数量的项。
						方法始终返回一个数组，该数组包含从原始数组中删除的项（如果没有删除任何项，返回一个空数组）
					*/
				   // 写法一：
					// this.keywordList.splice(index,1);
					// this.keywordList.splice(0,0,this.keyword);
					// 写法二：
					this.keywordList.splice(0,0,this.keywordList.splice(index,1)[0]);
				}
				// uni.setStorage()：将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
				uni.setStorage({
					key:"keyword",
					data:JSON.stringify(this.keywordList)
				})
			},
			// 清空最近搜索记录
			clearKeyword(){
				// 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮
				uni.showModal({
					title:"提示",
					content:"是否清空最近搜索记录",
					confirmText:"确定",
					cancelText:"取消",
					success: (res) => {
						// console.log(res);
						if (res.confirm) {
							// 从本地缓存中异步移除指定 key。
							uni.removeStorage("keyword");
							// 清空视图层数据
							this.keywordList = [];
						}
					}
				})
			},
			// 选择最近搜索关键词
			chooseKeyword(index){
				this.keyword = this.keywordList[index];
				// 动态修改searchInput
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();  
				// 设置 searchInput的 text  
				webView.setTitleNViewSearchInputText(this.keyword);
				// #endif
			}
		}
	}
</script>

<style>
	.line {
		width: 100%;
		height: 2rpx;
		background-color: #efefef;
	}

	.search-item {
		padding: 20rpx;
	}

	.search-title {
		display: flex;
		justify-content: space-between;
	}

	.search-name {
		padding: 4rpx 24rpx;
		background-color: #efefef;
		display: inline-block;
		border-radius: 26rpx;
		margin: 10rpx;
	}

	.search-end {
		text-align: center;
	}
</style>
